<template>
  <view class="hxk-tree-select">
    <view class="hxk-tree-select-input" @click.stop="handleShowTree">
      <view v-if="textShow" class="hxk-tree-select-input-text">{{ textShow }}</view>
      <view v-else class="hxk-tree-select-input-text hxk-tree-select-input-text--placeholder">{{ placeholder }}</view>
      <!--    iocn-clear       -->
      <view v-if="textShow" @click.stop="clearTextShow" class="uni-select__icon-clear">
        <uni-icons type="clear" color="#c0c4cc" size="24"/>
      </view>
      <view v-else>
        <uni-icons :type="showTree? 'top' : 'bottom'" size="14" color="#999"/>
      </view>
    </view>
    <hxk-tree ref="tree" :data="treeData" :title="textShow? textShow : '请选择'" :selectParent="true" :idKey="idKey"
              :nameKey="nameKey"
              @confirm="handleTreeConfirm" @cancel="handleTreeCancel"></hxk-tree>
  </view>
</template>
<script>
export default {
  name: "hxk-tree-select",
  props: {
    value: {
      type: [String, Number, Array],
      default: ''
    },
    title: {
      type: String,
      default: '请选择'
    },
    treeData: {
      type: Array,
      default: () => []
    },
    //唯一标识
    idKey: {
      type: String,
      default: 'id'
    },
    //名称
    nameKey: {
      type: String,
      default: 'name'
    },
    // 占位符
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 分隔符
    separator: {
      type: String,
      default: '/'
    }
  },
  data() {
    return {
      showTree: false,
      textShow: '',
      selectedData: []
    }
  },
  computed: {
    // 选中值Id数组
    valueIdArr: {
      get() {
        console.log('valueIdArr:', this.value)
        return this.value ? Array.isArray(this.value) ? this.value : this.value.toString().split(',') : []
      },
      set(val) {
        this.$emit('input', val)
        this.$emit('change', val, this.selectedData)
      }
    },
  },
  methods: {
    // 显示树
    handleShowTree() {
      if (this.disabled) return
      this.showTree = !this.showTree
      if (this.showTree) {
        this.$refs.tree._show()
      } else {
        this.$refs.tree._hide()
      }
    },
    // 清空输入框内容
    clearTextShow() {
      this.selectedData = []
      this.textShow = ''
      this.valueIdArr = []
      this.$refs.tree._initTree()
    },
    // 确认选择
    handleTreeConfirm(data) {
      this.selectedData = data
      this.textShow = data.map(item => item[this.nameKey]).join(this.separator)
      console.log('textShow:', this.textShow)
      this.valueIdArr = data.map(item => item[this.idKey])
      this.$emit('confirm', data)
    },
    // 取消选择
    handleTreeCancel() {
      this.showTree = false
    },
    // 更新树数据
    updateTreeData(tree, idArr) {
      tree.forEach(item => {
        if (tree && tree.length > 0) {
          tree.forEach(subItem => {
            if (idArr.includes(subItem[this.idKey])) {
              item.selected = true
            } else if (subItem.children && subItem.children.length > 0) {
              this.updateTreeData(subItem.children, idArr)
            }
          })
        }
      })
      return tree
    }
  }
}
</script>

<style scoped lang="scss">
.hxk-tree-select {
  width: 100%;
}

.hxk-tree-select-input {
  display: flex;
  align-items: center;
  padding: 10rpx;
  border: 1rpx solid #dadbde;
  height: 70rpx;
  border-radius: 10rpx;
  background-color: #fff;
  width: 100%;
  justify-content: space-between;

  .hxk-tree-select-input-text {
    font-size: 26rpx;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    &.hxk-tree-select-input-text--placeholder {
      color: #c0c4cc;
    }
  }
}
</style>